<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>距离、坡度图</title>
    <script src="css/echarts.min.js"></script>
    <script src="css/jquery.min.js"></script>
    <script src="css/vue.min.js"></script>
    <script src="css/layui/layui.js"></script>
    <link rel="stylesheet" href="css/layui/css/layui.css">
</head>

<body>
    <div id="ble" v-cloak>
        <div id="main" style="width:205px;height:360px;"></div>
    </div>

    <script type="text/javascript">

        var vm = new Vue({
            el: '#ble',
            data: {
                data: {},
            },
            methods: {
                //初始化数据
                initData: function () {
                    //初始化数据
                    vm.data = jQuery.parseJSON('[{"distance":0,"height":0}]');
                },
                setData: function () {
                    //填入数据
                    myChart.setOption({
                        dataset: {
                            sourceHeader: false,
                            dimensions: ['distance', 'height'],
                            source: vm.data
                        },
                    });
                }
            },
        });

        function reloadData() {
            vm.data.push(jQuery.parseJSON(Slope.returnSlopeJson()));
            vm.setData();
        }

        vm.initData();

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            grid: {
                left: '12%',
                right: '7%'
            },
            dataset: {},
            xAxis: {
                name: '距离',
                nameLocation: 'middle',
                nameGap: 20,
                type: 'value'
            },
            yAxis: {
                name: '高度',
                nameLocation: 'middle',
                nameGap: 25,
                type: 'value'
            },
            series: [{
                type: 'line',
                smooth: 'false',
                color: 'blue',
                symbolSize: 0
            }],
        };

        vm.setData();

        option && myChart.setOption(option);
    </script>
</body>

</html>